<template>
  <view class="flex-col page">
    <view class="flex-row justify-center items-center relative section_2">
      <image class="image_4 pos" src="@/static/common/back.png" @click="backToSetting" />
      <text class="font">{{ $t('mine.language') }}</text>
    </view>
    <view class="flex-col group">
      <view
        v-for="(item, index) in List"
        :key="index"
        class="mt-12 flex-col justify-start items-start text-wrapper"
        :class="{ section_3: type === item.value }"
        @click="handleSelectLang(item)"
      >
        <text class="font text_3">{{ item.label }}</text>
        <image class="image_5" src="@/static/common/i-language-select.png" v-if="type === item" />
      </view>
      <view class="mt-24 flex-col justify-start items-center self-center text-wrapper_2" @click="Confirm">
        <text class="font_3 text_11">{{ $t('common.confirm') }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      type: uni.getLocale(),
      List: [
        { label: this.$t('mine.languageEN'), value: 'en' },
        { label: this.$t('mine.languageZHTR'), value: 'zhFan' },
        { label: this.$t('mine.languageZH'), value: 'zh-Hans' }
      ]
    };
  },
  onLoad() {
    this.type = this.$i18n.locale;
  },

  methods: {
    backToSetting() {
      uni.navigateTo({
        url: '/pages/mine/settings/index'
      });
    },
    handleSelectLang(item) {
      this.type = item.value;
    },
    Confirm() {
      uni.setLocale(this.type);
      this.$i18n.locale = this.type;
      this.List = [
        { label: this.$t('mine.languageEN'), value: 'en' },
        { label: this.$t('mine.languageZHTR'), value: 'zhFan' },
        { label: this.$t('mine.languageZH'), value: 'zh' }
      ];
      setTimeout(() => {
        uni.switchTab({
          url: '/pages/home/index'
        });
      }, 1000);
    }
  }
};
</script>

<style scoped lang="scss">
.ml-5 {
  margin-left: 0.31rem;
}
.text-wrapper_2 {
  padding: 1rem 0;
  background-image: linear-gradient(307.5deg, #00f6ff 0%, #8312f2 69.5%, #fb97ad 100%);
  border-radius: 0.75rem;
  width: 13.94rem;

  .text_11 {
    color: #ffffff;
    line-height: 0.74rem;
  }
}
.page {
  padding-bottom: 15rem;
  background-color: #140c2b;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
  .section {
    padding: 1.13rem 1rem 1.13rem 2.25rem;
    background-color: #201836;
    .text {
      color: #ffffff;
      font-size: 0.75rem;
      font-family: PingFang SC;
      line-height: 0.56rem;
    }
    .image {
      width: 1.06rem;
      height: 0.56rem;
    }
    .image_2 {
      width: 0.94rem;
      height: 0.56rem;
    }
    .image_3 {
      width: 1.5rem;
      height: 0.71rem;
    }
  }
  .section_2 {
    padding: 0.88rem 1rem;
    .image_4 {
      border-radius: 0.5rem;
      width: 1.78rem;
      height: 1.78rem;
    }
    .pos {
      position: absolute;
      left: 0.98rem;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  .text-wrapper {
    padding: 1rem 0.75rem 0.88rem;
    background-color: #201836;
    border-radius: 0.5rem;
    .text_2 {
      margin-left: 0.88rem;
      line-height: 0.93rem;
    }
    .text_3 {
      margin-left: 0.88rem;
      line-height: 0.93rem;
    }
    .text_4 {
      margin-left: 0.88rem;
      line-height: 0.74rem;
    }
    .text_5 {
      margin-left: 0.88rem;
      line-height: 0.93rem;
    }
    .text_6 {
      margin-left: 0.75rem;
    }
    .text_7 {
      margin-left: 0.88rem;
      line-height: 0.84rem;
    }
  }
  .text-wrapper_2 {
    padding-top: 1rem;
    background-color: #201836;
    border-radius: 0.5rem;
    height: 3rem;
    .text_8 {
      margin-left: 0.75rem;
      line-height: 1.19rem;
      width: 4.69rem;
    }
  }
  .group {
    margin-top: 0.75rem;
    padding: 0 1rem;
    .section_3 {
      padding: 1rem 0.75rem 0.88rem;
      background-color: #201836;
      border-radius: 0.5rem;
      border-left: solid 0.063rem #00f6ff;
      border-right: solid 0.063rem #00f6ff;
      border-top: solid 0.063rem #00f6ff;
      border-bottom: solid 0.063rem #00f6ff;
      align-items: center;
      justify-content: space-between;
      flex-direction: row;
      .image_5 {
        width: 1.13rem;
        height: 1.13rem;
      }
    }
  }
  .font {
    font-size: 1rem;
    font-family: PingFang SC;
    line-height: 0.94rem;
    color: #ffffff;
  }
}
</style>
